<template>
  <div class="fxs-card">
    <div class="card_bg">
      <img :src="imgUrl()"
           alt
           width="100%" />
      <!-- <if condition="$filename">
            <img src="{$filename}" alt="">
            <else/>
            <img src="/Public/images/cardview/tpl{$homepage_tpl_id}.png" alt="">
      </if>-->
    </div>
    <div class="card_bar">
      <van-button class="btn j-change-card" color="linear-gradient(-90deg,rgba(255,139,2,1),rgba(255,173,0,1))" round block text="保存图片" @click="saveImg()"></van-button>
      <van-button class="btn j-change-card" color="linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1))" round block text="更换背景" @click="shopPop()"></van-button>
    </div>
    <van-popup v-model="show">
      <div class="swiper-box">

        <!-- 小程序端用swiper -->
        <wx-swiper  ref="wxSwiper"
                    class="wx-swiper"
                    :circular="true" 
                    :current="current"
                    :show-indicators="false"
                    @change="onChange">
          <wx-swiper-item v-if="defaultInfo">
            <div class="img-bg"
                :style="getDefaultStyle()"></div>
          </wx-swiper-item>
          <wx-swiper-item v-for="(item,index) in list" :key="index">
            <div class="img-bg"
                :style="getStyle(item.bg_path)"></div>
          </wx-swiper-item>
        </wx-swiper>

        <!-- <scroll class="wrapper"
                ref="wrapper"
                :data="list"
                :startX="0"
                :click="true"
                :scrollX="true"
                :scrollY="false"
                :eventPassthrough="'vertical'"> -->
        <div class="wrapper" ref="wrapper">
          <div class="content custom-indicator"
              v-if="defaultInfo">
            <div class="img-sm"
                :style="getDefaultStyle()"
                :class="[current == 0 ? 'active' : '']"
                @click="selectImg(0)"></div>
            <div class="img-sm"
                v-for="(item, index) in list"
                :key="index"
                :style="getStyle(item.bg_path)"
                :class="[current == (index+1) ? 'active' : '']"
                @click="selectImg(index+1)"></div>
            <!-- <div class="img-sm"
                :style="getDefaultStyle()"
                :class="[current == 0 ? 'active' : '']"
                @click="selectImg(0)"></div> -->
          </div>
          <div class="content custom-indicator"
              v-else>
            <div class="img-sm"
                v-for="(item, index) in list"
                :key="index"
                :style="getStyle(item.bg_path)"
                :class="[current == index ? 'active' : '']"
                @click="selectImg(index)"></div>
            <!-- <div v-if="list.length > 4"
                class="img-sm"
                :style="getStyle(list[0])"
                :class="[current == 0 ? 'active' : '']"
                @click="selectImg(0)"></div> -->
          </div>
        </div>
        <!-- </scroll> -->
        <div class="create-card"
            @click="createCard()">
          <van-button class="btn" round color="linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1))">确定生成二维码</van-button>
        </div>
      </div>
      <div class="icon-close"
            @click.stop="closePop()"></div>
    </van-popup>
  </div>
</template>

<script>

import Vue from 'vue'
import Scroll from '@/components/scroll/index'
import { Popup, Swipe, SwipeItem } from 'vant'
import { getFxCard, uploadCard } from '@/api/user/fxs/fxsApi'
import small from '@/smallapp/small'

Vue.use(Popup)
  .use(Swipe)
  .use(SwipeItem)
export default Vue.extend({
  data() {
    return {
      filename: '',
      homepage_tpl_id: null,
      show: false,
      current: 0,
      defaultInfo: {},
      list: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      getFxCard().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.filename = res.data.filename
          this.homepage_tpl_id = res.data.homepage_tpl_id
          this.defaultInfo = res.data.default
          this.list = res.data.list
        } else {
          this.$Error(res.msg)
        }
      })
    },
    imgUrl() {
      return this.filename
        ? this.filename
        : this.defaultInfo.img_url
    },
    shopPop() {
      this.show = true
    },
    saveImg () {
      small.saveImage(this.imgUrl())
    },  
    closePop() {
      this.show = false
    },
    onChange(e) {
        this.current=e.detail.current
      if (this.current == 0) {
        this.$refs.wrapper.scrollTo(0, 0)
      } else if (this.current > 1) {
        const el = this.$refs.wrapper.$el.getElementsByClassName('img-sm')[
          this.current - 1
        ]
        this.$refs.wrapper.scrollToElement(el, 500)
      }
    },
    selectImg(index) {
      this.current = index
      if (index == 0) {
        this.$refs.wrapper.scrollTo(0, 0)
      } else if (index > 1) {
        const el = this.$refs.wrapper.$el.getElementsByClassName('img-sm')[
          index - 1
        ]
        this.$refs.wrapper.scrollToElement(el, 500)
      }
    },
    getStyle(url) {
      return {
        background: `url(${url}) center no-repeat`,
        'background-size': 'cover'
      }
    },
    getDefaultStyle() {
      return {
        background: `url(${this.defaultInfo.bg_path}) center no-repeat`,
        'background-size': 'cover'
      }
    },
    createCard() {
      this.show = false
      const data = {}
      if (this.defaultInfo) {
        if (this.current > 0) {
          data.bg_path = this.list[this.current - 1].bg_path
        } else {
          data.bg_path = this.defaultInfo.bg_path
        }
      } else {
        data.bg_path = this.list[this.current].bg_path
      }
      uploadCard(data).then(res => {
        if (res.status == 1) {
          this.filename = res.data.url + '?' + new Date().getTime()
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  components: {
    Scroll
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  }
})
</script>

<style lang="scss">
@import "../../../../styles/variables";
.fxs-card{
  .card_bg{
    padding:20px;
    img{
      display:inline;
    }
  }
  .card_bar {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    height: 96px;
    padding:10px 24px;
    border-radius:20px;
    background:#fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    .btn{
      width: 47%;
      height:76px;
      font-size:28px;
    }
  }
  .van-popup {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height:1010px;
    background:transparent;
    .swiper-box {
      width:100%;
      height:890px;
      padding:30px;
      border-radius:20px;
      background:#fff;
      .wx-swiper{
        width: 540px;
        height: 540px;
      }
      .img-bg {
        overflow:hidden;
        width: 540px;
        height: 540px;
        border-radius:10px;
      }
      .wrapper {
        width: 540px;
        overflow-x: scroll;
        margin:20px auto;
        .custom-indicator {
          display: inline-block;
          white-space: nowrap;
          height:126px;
          .img-sm {
            display: inline-block;
            width: 126px;
            height: 126px;
            margin-right: 6px;
            border-radius:10px;
            border: 2px solid transparent;
            &.active {
              border-color: #F30C23;
            }
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }  
    .create-card{
      margin-top:50px;
      .btn{
        width:540px;
        height:76px;
        font-size:28px;
      }
    }
  }
  .icon-close {
    width: 72px;
    height: 72px;
    margin:36px auto 0;
    border-radius: 50%;
    background: url("https://img.wifenxiao.com/h5-wfx/images/dialog_close.png") center
      no-repeat;
    background-size: 100%;
  }
}


</style>
